@use 'sass:map';
@use '../../../../../node_modules/@angular/material/index' as mat;
@use '../../../../../node_modules/@gravitee/ui-particles-angular/index' as gio;

@use '../../../../scss/gio-layout' as gio-layout;

$typography: map.get(gio.$mat-theme, typography);

:host {
  @include gio-layout.gio-responsive-margin-container;
}

.application-general {
  &__content {
    display: flex;
    flex-direction: column;
    gap: 16px;
  }
}

.details-card {
  &__header {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-content: center;
    justify-content: space-between;
    align-items: stretch;
    gap: 16px;

    &__info-inputs {
      flex: 1 1 auto;

      &__first-row {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        column-gap: 16px;

        &__name-field {
          flex: 6 1 auto;
        }
      }

      &__second-row {
        margin-top: 8px;
        display: flex;
        flex-direction: column;

        &__description-field {
          flex: 1 1 auto;
        }
      }

      &__client_id-row {
        margin-top: 8px;
        display: flex;
        flex-direction: column;
      }
    }

    &__right-coll {
      flex: 0 0 292px;

      @include gio-layout.small-desktop {
        flex: 0 1 auto;
      }

      &__media {
        display: flex;

        &__picture {
          flex: 0 0 0%;

          &__btn {
            position: relative;
            display: flex;
            align-items: center;
            justify-content: center;
            height: 100%;

            &__text {
              @include mat.typography-level($typography, caption);
              position: absolute;
              width: 100%;
              height: 114px;
              z-index: 100;
              left: 0;
              visibility: hidden;
              opacity: 0;
              display: flex;
              justify-content: center;
              align-items: center;
            }
          }

          &:hover {
            .details-card__header__right-coll__media__picture__btn__default-avatar {
              opacity: 0.1;
            }
            .details-card__header__right-coll__media__picture__btn__text {
              opacity: 1;
              visibility: visible;
            }
          }
        }

        &__background {
          flex: 0 0 0%;

          &__btn {
            &__text {
              @include mat.typography-level($typography, caption);
              display: flex;
              justify-content: center;
              align-items: center;
              height: 114px;
            }
          }
        }
      }
    }

    @include gio-layout.small-desktop {
      flex-direction: column;
    }
  }

  &__actions {
    &_btn {
      margin-right: 8px;
    }
  }
}

.details-title-oauth,
.details-title-openid {
  margin: 20px 0 5px 0;
}

.oauth {
  flex-basis: 50%;
  padding: 0 0 20px;
}

.coll-oauth {
  column-gap: 16px;
}

.danger-card {
  border: 1px solid mat.get-color-from-palette(gio.$mat-error-palette, 'default');

  &__title {
    color: mat.get-color-from-palette(gio.$mat-error-palette, 'default');
  }

  &__actions {
    display: flex;
    flex-direction: column;

    &__action {
      display: flex;
      align-items: center;
      flex-direction: row;
      justify-content: space-between;
      height: 48px;
    }
  }
}
